@import '~antd/es/style/themes/default.less';
@bg-color: #1b1b1c;
@border-radius: 5px;
@padding: 2px;
@margin: 2px;
@panelBoxStyle: {
  background-color: @bg-color;
  border-radius: @border-radius;
};
.panoramicToolPanel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: @padding;
  color: #fff;
  background-color: #000;
  .top {
    display: flex;
    align-items: center;
    // justify-content: center;
    width: 100%;
    height: 6%;
    margin-bottom: @margin;
    @panelBoxStyle();
  }
  .content {
    display: flex;
    flex: 1;
    width: 100%;
    .contentLeft {
      display: flex;
      flex: 1;
      height: 100%;
      .menuList {
        width: 4.5%;
        min-width: 70px;
        height: 100%;
        margin-right: @margin;
        @panelBoxStyle();
      }
      .leftPanel {
        width: 20%;
        min-width: 300px;
        max-width: 350px;
        height: 100%;
        margin-right: @margin;
        @panelBoxStyle();
      }

      .center {
        display: flex;
        flex: 1;
        flex-direction: column;
        height: 100%;
        .centerT {
          position: relative;
          display: flex;
          flex: 1;
          flex-direction: column;
          @panelBoxStyle();
          .toolbar {
            display: flex;
            align-items: center;
            width: 100%;
            height: 5%;
          }
          .canvas {
            position: relative;
            flex: 1;
            width: 100%;
          }
        }
      }
      .contentLB {
        flex: 1;
        width: 100%;
        @panelBoxStyle();
      }
    }
    .contentRightSlider {
      display: flex;
      justify-content: center;
      width: 2%;
      height: 100%;
      margin-right: 2px;
      margin-left: @margin;
      background-color: @bg-color;
    }
    .contentRight {
      width: 16%;
      min-width: 300px;
      max-width: 400px;
      background-color: @bg-color;
      border-radius: 0 @border-radius @border-radius 0;
    }
  }
}
